<template>
	<view class="container">
		<view class="status_bar">
		</view>
		<view class="status_title">
			<text class="status_left xl text-black cuIcon-back" @click="back()"></text>
			<view class="status_center">{{name}}</view>
			<image class="status_right" mode="widthFix"></image>
		</view>
		<scroll-view scroll-y="true" scroll-x="false"  scroll-with-animation="true">
			<view class="tui-chat-content chatBox" >
				<tui-loadmore v-if="loadding" :index="3" type="primary" text=" "></tui-loadmore>
				<view v-show="true" id="test" class="chatChild" v-for="(item,index) in chatList" :key="index">	
					<view class="tui-label" v-if="item.type==5">{{item.content}}</view>
					<view class="tui-chat-center" v-if="item.type==4">{{item.content}}</view>
					<view class="tui-chat-right" v-if="item.type==1&&item.userId==userId">
						<view class="tui-chatbox tui-chatbox-right">{{item.content}}</view>
						<img :src="item.src" class="tui-user-pic tui-left"></img>
					</view>
					<view class="tui-chat-left" v-if="item.type==1&&item.userId!=userId">
						<img :src="item.src" class="tui-user-pic tui-right"></img>
						<view class="tui-chatbox tui-chatbox-left">{{item.content}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-bar foot input" style="width:100%">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="solid-bottom" :adjust-position="true" :focus="false" maxlength="300" cursor-spacing="10" v-model="sendContent"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="submitChat">发送</button>
		</view>
	</view>
</template>

<script>
// {
// 	type: 1, //1-文字 2-图片 3-语音，4-时间 5-提醒 ...
// 	userId: 1, //用户标识 不一定是userid
// 	text: '',
// 	src: '',
// 	read: false,
// 	success: false,
// 	isMe:false,//用来指左右
// }
// {
// 	type:5,
// 	content:"加入了聊天",
// },
// {
// 	type:4,
// 	content:"星期五 14:37",
// },
// {
// 	type:1,
// 	userId:'123',
// 	content:"你好",
// 	src:"https://pic2.zhimg.com/80/v2-a98aec34a8ee6c0b30c8c178696220be_720w.jpg?source=1940ef5c"
// },
// {
// 	type:1,
// 	userId:'123456',
// 	content:"你也好",
// 	src:"https://pic2.zhimg.com/80/v2-a98aec34a8ee6c0b30c8c178696220be_720w.jpg?source=1940ef5c"
// }
import md5 from 'md5';
import tChatBar from '@/components/t-chat-bar/t-chat-bar';
export default {
	components: {
		tChatBar
	},
	data() {
		return {
			loadding: false,
			show: false,
			bottom: 0,
			myUserId: 2,
			content:"",
			userId:'',
			name:"",
			chatList: [],
			showIndex: 0, //1-键盘 2-表情 3-其他
			keyboardHeight: 0,
			replyContainerH: uni.upx2px(500),
			faceList: [],
			sendContent:"",
			userMap:null,
			chatId:"",
			firstKey:"",
			secondKey:"",
			SEA:null,
			isEnde:false,
			scrollTop:0,
			chatHeight:0
		};
	},
	onLoad: async function(options) {
		let info = uni.getSystemInfo();
		this.chatHeight = info.windowHeight;
		
		let res = await this.api.public.getChatDetails({chatId:options.chatId})
		this.chatId = options.chatId;
		this.userId = res.data.userId;
		this.name = res.data.chatInfo.name;
		this.userMap = new Map();
		res.data.chatInfo.userList.forEach(item=>{
			this.userMap.set(item.userId,{avatarImg:`${this.url}/${item.avatarImg}`,name:item.name});
		});
		
		//检验密钥
		this.firstKey = res.data.chatInfo.firstKey;
		this.secondKey = uni.getStorageSync(res.data.chatInfo.id);
		console.log(this.secondKey);
		if(this.secondKey&&md5(this.secondKey)==res.data.chatInfo.secondKey){
			this.isEnde = true;
			this.SEA = new this.$sea(this.firstKey);
		}
		
		//放入聊天数组处理过程
		res.data.chatInfo.record.forEach(item=>{
			item.type = 1;
			item.src = this.userMap.get(item.userId).avatarImg;
			item.name = this.userMap.get(item.userId).name;
			//如下是解密过程
			item.content = this.decrypt(item.content);
			
			this.chatList.unshift(item);
		});
		console.log(this.userMap);
		this.scrollToBottom();
	},
	sockets:{
		chat(data){
			if(this.userMap!=null||this.userMap!=void 0){
				console.log(`接收到了`);
				console.log(data);
				
				data.src = this.userMap.get(data.userId).avatarImg;
				data.type = 1;
				data.name =  this.userMap.get(data.userId).name;
				//如下解密过程
				console.log(data.content);
				data.content = this.decrypt(data.content);
				this.chatList.push(data);
				
				// console.log(data);
				
				return;
			}
			// console.log(this.chatList);
		},
		isSend(res){
			if(!res.status){
				uni.showToast({
					title:res.content,
					duration:3000,
					icon:"none"
				});
				return;
			}
			console.log(`本客户端发送成功，返回结果为`);
			console.log(res);
			console.log(this.userMap);
			res.data.src = this.userMap.get(res.data.userId).avatarImg;	
			res.data.name = this.userMap.get(res.data.userId).name;
			res.data.type = 1;
			res.data.content = this.decrypt(res.data.content);
			this.chatList.push(res.data);
			this.sendContent = "";
		}
	},
	methods: {
		scrollToBottom(){
			// let query = uni.createSelectorQuery();
			// let heightAll=0;
			// query.selectAll('.chatChild').boundingClientRect();
			// query.select('.chatBox').boundingClientRect();
			// query.exec((res)=>{
			// 	console.log(res[0]);
			// 	res[0].forEach(item=>{
			// 		console.log(item);
			// 		console.log(item.height);
			// 		heightAll+=item.height;
			// 	})
			// 	console.log(res[1])
			// 	setTimeout(()=>{
			// 		console.log(heightAll);
			// 		this.scrollTop = heightAll;
			// 	},100);
			// })
			
			
			// uni.getSystemInfo({
			// 　　success: function(res) { // res - 各种参数
			
			// 　　    let info = uni.createSelectorQuery().select("#test");
			// 　　　  　info.boundingClientRect(function(data) { //data - 各种参数
			// 		  console.log(data);
			// 　　　  　console.log(data.width)  // 获取元素宽度
			// 　　    }).exec()
			//        }
			// });
			
			
			//web版的
			let dom = document.querySelector(".chatBox");
			dom.scrollTop = dom.offsetHeight;
			setTimeout(()=>{
				console.log(dom.offsetHeight);
				console.log(dom.scrollTop);
				document.body.scrollTop = dom.offsetHeight;
				console.log(dom.scrollTop);
			},100);

		},
		decrypt(str){
			if(this.isEnde){
				let res = this.SEA.decrypt(this.secondKey,str);
				if(res==null){
					return str;
				}
				if(res.length==0){
					return str;
				}
				return res;
			} else {
				return str;
			}
		},
		encrypt(str){
			if(this.isEnde){
				return this.SEA.encrypt(this.secondKey,str);
			} else {
				return str;
			}
		},
		hideKeyboard() {
			//隐藏键盘
			this.showIndex = 0;
			// uni.hideKeyboard();
		},
		submitChat(){
			if(this.sendContent==""){
				return;
			}
			console.log(this.sendContent);
			//加密过程
			let content = this.encrypt(this.sendContent);
			console.log(content);
			this.$socket.emit('chat',{
				token:uni.getStorageSync('token'),
				chatId:this.chatId,
				content:content
			})
		},
		showKeyBoard(index) {
			if (this.showIndex == index) return;
			this.showIndex = index;
			this.isVoice = false;
			// if(index==1){
			// 	this.$refs.textarea.focus();
			// }
			// setTimeout(function() {
			// 	if(index==1){
			// 		this.$refs.textarea.focus();
			// 	}
			// }, 150);
		},
		inputReply(e) {
			this.content = e.detail.value;
		},
		async back(){
			
			let res = await this.api.public.updateChatTime({
				chatId:this.chatId
			})
			uni.navigateTo({
				url:"/pages/index/index"
			})
		}
	},
	onPageScroll(e) {
		if (e.scrollTop == 0 && !this.loadding) {
			this.loadding = true;
			setTimeout(() => {
				this.show = true;
				this.loadding = false;
			}, 1000);
		}
	}
};
</script>

<style lang="scss">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
	
.container {
	box-sizing: border-box;
}
.chat{
	margin-top:44px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:120upx;
}

.chatBox{
	margin-top:44px;
	padding-bottom:120upx;
}

.status_title {
	top:0;
	position:fixed;
	z-index:999;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	background-color: #FFFFFF;
}
.status_left {
	width: 20px !important;
	font-size:20px;
}
.status_center {
	font-size: 17px;
	font-weight: 700;
}
.status_right {
	width: 22px;
}

/*chatbox*/
.tui-chat-content {
	width: 100%;
}

.tui-chatbox {
	max-width: 66%;
	border-radius: 10rpx;
	position: relative;
	padding: 20rpx 22rpx;
	font-size: 32rpx;
	color: #333;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-chatbox::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 20rpx;
	border: 16rpx solid;
}

.tui-chatbox-left {
	background: #f8f8f8;
	border: 1rpx solid #fff;
	display: inline-block;
}

.tui-chatbox-left::before {
	right: 100%;
	border-color: transparent #fff transparent transparent;
}

.tui-chatbox-right {
	background: #a0d5f3;
	border: 1rpx solid #a0d5f3;
}

.tui-chatbox-right::before {
	left: 100%;
	border-color: transparent transparent transparent #a0d5f3;
}

/*chatbox*/

.tui-chat-left,
.tui-chat-right {
	display: flex;
	align-items: flex-start;
	padding-top: 36rpx;
}

.tui-user-pic {
	width: 80rpx;
	height: 80rpx;
	flex-shrink: 0;
	border-radius: 50%;
	display: block;
}

.tui-left {
	margin-left: 26rpx;
}

.tui-right {
	margin-right: 26rpx;
}

.tui-chat-right {
	justify-content: flex-end;
}

.tui-chat-center {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28rpx;
	font-size: 28rpx;
	color: #666;
	padding-top: 36rpx;
}

.tui-label {
	display: inline-block;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 36rpx;
	padding: 12rpx 16rpx;
	text-align: center;
	border-radius: 8rpx;
	margin-left: 50%;
	transform: translateX(-50%);
}

.tui-img-chatbox {
	position: relative;
}

.tui-img-chatbox::after {
	content: '';
	position: absolute;
	height: 200%;
	width: 200%;
	border: 1rpx solid #eaeef1;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	left: 0;
	top: 0;
	border-radius: 20rpx;
}

.tui-chat-img {
	max-width: 200rpx;
	/* min-height: 80rpx; */
	display: block;
	border-radius: 10rpx;
}

.tui-chat-flex {
	display: flex;
	align-items: center;
}

.tui-flex-center {
	display: flex;
	align-items: center;
}

.tui-chat-voice {
	width: 40rpx;
	height: 40rpx;
	display: block;
	flex-shrink: 0;
}

.tui-rotate {
	transform: rotate(180deg);
}

.tui-chat-fail {
	width: 50rpx;
	height: 50rpx;
	display: block;
	flex-shrink: 0;
}

.tui-mr {
	margin-right: 16rpx;
}

.tui-ml {
	margin-left: 16rpx;
}

.tui-flex-end {
	justify-content: flex-end;
}

.tui-flex-reverse {
	flex-direction: row-reverse;
}

@font-face {
	font-family: 'ticons';
	src: url(data:application/font-woff;charset=utf-8;base64,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)
		format('woff');
	font-weight: normal;
	font-style: normal;
}

.tui-reply-tabbar {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: 999;

	.tui-chat-tabbar {
		width: 100%;
		background-color: $uni-bg-color-grey;
		display: flex;
		align-items: flex-end;
		padding: 16rpx 24rpx;
		box-sizing: border-box;

		&::after {
			content: ' ';
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			border-top: 1rpx solid $uni-text-color-placeholder;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}

		.tui-chat-input {
			flex: 1;
			/* #ifndef MP-WEIXIN */
			min-height: 46rpx;
			padding: $uni-spacing-col-base 0;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			min-height: 78rpx;
			/* #endif */
			background-color: $uni-bg-color;
			border-radius: 8rpx;
			margin: 0;
		}

		
		.tui-send-box {
			width: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.tui-btn-send {
			flex-shrink: 0;
			padding: 22rpx 0;
			font-size: 30rpx;
			line-height: 30rpx;
		}
	}
}

.tui-reply-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
	background-color: $uni-bg-color-mask;
	visibility: hidden;
	transition: all 0.3s ease;
	opacity: 0;
}

.tui-box-show {
	visibility: visible !important;
}
.tui-mask-show {
	opacity: 1;
}
</style>
